<template>
  <a-modal
    v-model:visible="visible"
    simple
    :footer="false"
    modal-class="!p-0px !rounded-16px"
    hide-title
  >
    <div
      class="w-400px h-600px pb-10px bg-white rounded-16px overflow-hidden relative z-0 flex flex-col"
      @mouseleave="handleMouseLeave"
    >
      <div
        class="absolute top-0 inset-x-0 w-full h-64px bg-gradient-to-b from-#FFE8F5 to-#FFFFFF z-[-1]"
      ></div>
      <div class="mt-24px mx-18px flex flex-row justify-between items-center">
        <div class="text-24px leading-24px font-bold text-#242633">送礼物</div>
        <div class="flex-1"></div>
        <button class="flex flex-row items-center w-24px h-24px" @click="visible = false">
          <img src="@/assets/close.png" alt="" class="w-full h-full" />
        </button>
      </div>
      <div class="w-full flex-1 overflow-hidden">
        <div class="mb-12px w-full h-full box-border relative overflow-y-scroll no-scrollbar">
          <div
            :style="{
              top: Math.floor(index / 4) * (60 + 50) + 'px',
              left: (index % 4) * (78 + 22) + 'px'
            }"
            :class="index === selectId ? 'ishover' : ''"
            class="h-100px mt-12px absolute mx-9px w-78px flex flex-col items-center gift-item rounded-4px cursor-pointer transition-all !duration-300 overflow-hidden"
            v-for="(item, index) in giftList"
            @mouseenter="handleMouseEnter(index)"
          >
            <a-trigger position="top" auto-fit-position :unmount-on-close="false">
              <div class="flex flex-col w-full h-full">
                <div
                  class="w-78px h-60px rounded-12px px-14px box-border gift-img transition-all !duration-300"
                >
                  <img :src="item.image_url" alt="" class="w-full h-full" />
                </div>
                <div class="mt-4px w-full text-12px text-#525566 text-center truncate gift-name">
                  {{ item.name }}
                </div>
                <div
                  class="mt-4px w-full text-12px text-#525566 text-center truncate gift-price transition-all !duration-300"
                >
                  {{ item.price }}
                </div>
                <div
                  class="bg-#6b39ff w-full text-12px text-center text-white gift-btn transition-all !duration-300"
                  @click="handleClick(1)"
                >
                  赠送
                </div>
              </div>
              <template #content>
                <div class="triggier flex flex-wrap" @mouseenter="handleMouseEnter(index)">
                  <div
                    class="relative number-item bg-white text-center w-60px mt-15px text-12px py-5px mr-10px border rounded-4px cursor-pointer"
                    v-for="(i, idx) in numberList"
                    @click="handleClick(i)"
                  >
                    <span class="price absolute">{{ `${i * item.price}金币` }}</span>
                    <span class="span1"> {{ i + '个' }}</span>
                    <span class="span2"> {{ '送' + i + '个' }}</span>
                  </div>
                </div>
              </template>
            </a-trigger>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watchEffect, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useVModel } from '@vueuse/core'
import { getGifts, sendGift } from '@/api/user'
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/store'
const route = useRoute()
const userId = route.params.id
const props = defineProps(['visible'])
const emits = defineEmits(['update:visible'])
const visible = useVModel(props, 'visible', emits, 'update:visible')
const numberList = [1, 52, 66, 99, 520, 1314]
const selectId = ref(-1)
const giftList = ref([])
const handleMouseLeave = () => {
  selectId.value = -1
}
const handleMouseEnter = (id) => {
  selectId.value = id
}
const handleClick = (number) => {
  console.log(number)
  if (selectId.value === -1) {
    Message.error('请选择礼物')
    return
  }
  sendGift({
    user_id: Number(userId),
    gift_id: giftList.value[selectId.value].id,
    number: number
  }).then((res) => {
    Message.success('赠送成功')
    // console.log(res)
  })
}
watchEffect(() => {
  if (visible.value) {
    getGifts().then((res) => {
      giftList.value = res
    })
  }
})
</script>
<style lang="less" scoped>
.triggier {
  padding: 10px;
  width: 300px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  font-size: 12px;
  .span1 {
    display: block;
  }
  .span2 {
    display: none;
  }
  .price {
    top: 10px;
    left: 50%;
    width: 100px;
    color: #888;
    transform-origin: center;
    transform: translateX(-50%) scale(0.75);
    transition: all 0.3s ease-in-out;
    z-index: -1;
  }
  .number-item {
    transform: all 0.3s ease-in-out;
    &:hover {
      background-color: #6b39ff;
      .span1 {
        display: none;
      }
      .price {
        top: -15px;
        z-index: 1;
      }
      .span2 {
        display: block;
        color: #fff;
      }
    }
  }
}
.gift-item {
  &.ishover {
    background-color: #f5f5f5;
    // transform: translateY(-10px);
    .gift-img {
      transform: translateY(-5px) scale(0.8);
    }
    .gift-btn {
      height: auto;
      padding: 4px;
      opacity: 1;
    }
    .gift-price {
      opacity: 1;
    }
    .gift-name {
      display: none;
    }
  }
  .gift-price {
    transform-origin: center;
    transform: translateY(-10px) scale(0.75);
    opacity: 0;
  }
  .gift-name {
    display: block;
  }
  .gift-btn {
    height: 0;
  }
}
</style>
